﻿<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<meta name="keywords" content="3D CSS 字体特效, 3D CSS 字体,css 3d 特效, 3d css 字体特效, 3d css 字体 ,3d css 特效, 3D字体CSS特效, 字体特效"/>
		<meta name="description" content="CSS 3D字体 在线制作工具，无需任何JS，完全CSS打造！"/>
		<title>CSS 3D字体 在线制作工具</title>
		<link type="text/css" href="css/style_1.css" rel="stylesheet"/>
		<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
		<link rel="stylesheet" href="css/colorpicker.css" type="text/css"/>
		<script type="text/javascript" src="js/colorpicker.js"></script>
		<link type="text/css" href="css/jquery-ui-1.8.7.custom.css" rel="stylesheet"/>
		<script type="text/javascript" src="js/init-2.js"></script>
	</head>
	<body>
		<div id="wrapper">
			<div id="gradient"></div>
			<div id="editor">
				<h1 contenteditable="true" class="3DText hide">abcdefghijklmn123456789<br>
				点我可以输入哦快点来试试吧</h1>
			</div>
			<div id="tagline">
				<h2> CSS 3D字体 在线制作工具，无需任何JS，完全CSS打造！</h2>
				<h3>请使用最新版的Firefox、Chrome、Safari、Opera或者IE10来制作！</h3>
				<h3>更多工具请前往 <a href="http://tool.tecms.net/">工具箱</a></h3>
			</div>
			<div class="throbber"></div>
			<div id="controls">
				<div class="handle move">
					<a name="move" class="move iconic" title="移动"></a>
				</div>
				<div class="handle collapser minimize">
					<a name="minus" class="iconic" title="隐藏">-</a>
				</div>
				<div class="handle reset hilighted">
					<a name="spin" class="spin iconic" title="重置"></a>
				</div>
				<span class="hide" id="resetMessage"></span>
				<div id="controlsInner">
					<div id="controlsInner2">
						<div class="control floatLeft">
							<label for="font">字体</label>
							<br/>
							<select style="width:100px;" id="font">
								<optgroup label="中文字体">
									<option value="24" selected="selected">微软雅黑</option>
									<option value="25">黑体</option>
									<option value="26">宋体</option>
									<option value="27">仿宋</option>
									<option value="28">楷体</option>
									<option value="29">隶书</option>
								</optgroup>
								<optgroup label="网页安全字体">
									<option value="1">Arial</option>
									<option value="2">Arial Black</option>
									<option value="3">Bookman</option>
									<option value="4">Comic Sans</option>
									<option value="5">Courier</option>
									<option value="6">Garamond</option>
									<option value="7">Geneva</option>
									<option value="8">Georgia</option>
									<option value="9">Helvetica</option>
									<option value="10">Tahoma</option>
									<option value="11">Times</option>
									<option value="12">Verdana</option>
									<option value="13">Myriad Pro</option>
									<option value="14">Palatino</option>
									<option value="15">Impact</option>
									<option value="16">Century Gothic</option>
									<option value="17">Gill Sans</option>
									<option value="18">Lucida</option>
									<option value="19">Futura</option>
									<option value="20">Baskerville</option>
									<option value="21">Hoefler Text</option>
									<option value="22">Cooper</option>
									<option value="23">Rockwell</option>
								</optgroup>
								<optgroup label="图标字体">
									<option value="0">Iconic Icons</option>
								</optgroup>
							</select>
							<br/>
							<input type="checkbox" id="check1" checked="yes"/>
							<label for="check1">B</label>
							<input type="checkbox" id="check2"/>
							<label for="check2">I</label>
							<input type="checkbox" id="check3"/>
							<label for="check3">U</label>
						</div>
						<div class="control floatLeft" style="margin-left:25px;text-align:center;">
							<label for="Text Color">字体颜色</label>
							<br/>
							<div id="colorpicker" class="colorpickler">
								<div id="colorInner" class="colorInner">
									<div class="colorGradientOverlay"></div>
								</div>
							</div>
						</div>
						<div class="control floatLeft" style="margin-left:25px;text-align:center;">
							<label for="Background Color">背景颜色</label>
							<br/>
							<div id="colorpicker2" class="colorpickler">
								<div id="colorInner2" class="colorInner"></div>
							</div>
						</div>
						<div class="control floatLeft" style="margin-left:25px;">
							<label for="Angle" style="text-align:left;">偏移</label>
							<br/>
							<select id="angle">
								<option value="0">0&deg;</option>
								<option value="45">45&deg;</option>
								<option value="90">90&deg;</option>
								<option value="135">135&deg;</option>
								<option value="180">180&deg;</option>
								<option value="225">225&deg;</option>
								<option value="270">270&deg;</option>
								<option value="315" selected>315&deg;</option>
								<option value="360">360&deg;</option>
							</select>
						</div>
						<div class="control clear">
							<label for="fontSize">字体大小</label>
							<input type="hidden" name="fontSize" id="fontSize" value="141">
							<input type="hidden" name="fontPadding" id="fontPadding" value="0">
							<input type="hidden" name="fontColor" id="fontColor" value="#fff9d6">
							<input type="hidden" name="backgroundColor" id="backgroundColor" value="#224d7a">
							<div id="fontSizeSlider"></div>
						</div>
						<div class="control">
							<label for="height">偏移高度</label>
							<input type="hidden" name="height" id="height" value="6">
							<div id="fontHeightSlider"></div>
						</div>
						<div class="control">
							<label for="heightGradientMin">高度渐变</label>
							<input type="hidden" name="heightGradientMin" id="heightGradientMin" value="10">
							<input type="hidden" name="heightGradientMax" id="heightGradientMax" value="87">
							<div id="heightGradientSlider"></div>
						</div>
						<div class="control">
							<label for="height">阴影不透明度</label>
							:
							<input type="hidden" name="shadowOpacity" id="shadowOpacity" value=".6">
							<div id="shadowOpacitySlider"></div>
						</div>
						<div class="control center"> </div>
						<div class="control">
							<label for="code">CSS代码</label>
							<p id="fontMessage">
								你必须先下载这个字体
								<a href="http://code.google.com/p/tipsntechahmed/downloads/list" target="_blank">点我去下载</a>
								，才能正常使用Iconic Icons！
							</p>
							<div id="code">
								<code> 
									<br/>
									body { background-colo:<span class="backgroundColor">#666666</span> }<br/>
									.ThreeDee {<br/>
									font-family: <span class="fontFamily"></span>;<br/>
									line-height: 1em;<br/>
									color: <span class="fontColor"></span>;<br/>
									<span class="fontStyles"> <span class="fontWeight"></span> <span class="fontStyle"></span> <span class="textDecoration"></span> </span> font-size: <span class="fontSize"></span>;<br/>
									text-shadow:<span class="code"></span>;}<br/>
									<br/>
								</code> 
							</div>
						</div>
						<br/>
					</div>
				</div>
				<p class="footer">&copy; 2017 <a href="http://www.tecms.net/">默笙</a></p>
			</div>
		</div>
	</body>
</html>